<template>
  <div class="r_flex Upimg" :class="theme">
    <div v-for="(imgData, imgIndex) in dialogImageUrl" :key="imgIndex" class="up_img r_flex_center r_moxing" >
      <!-- 已经上传成功图片 -->
      <img :src="imgData.url" alt="">
      <!-- 删除提示 -->
      <div class="del_img r_flex_column" @click="delimginfo(imgData)">
        <i class="el-icon-plus" />
        <p class="r_size_12" style="margin: 4px; 0px">删除</p>
      </div>
    </div>
    <el-upload
      action=""
      :before-upload="beforeAvatarUpload"
      :http-request="requestUpload"
      :on-remove="handleRemove"
      v-show="number > this.dialogImageUrl.length"
    >
      <div class="upThemeOne r_flex_column">
        <i class="el-icon-plus" />
        <p class="r_size_12" style="margin: 4px; 0px;">点击上传</p>
      </div>
    </el-upload>
  </div>
</template>

<script>
import { ossUpload } from '@/api/oss/oss'

export default {
  name: 'UpImg',
  props: {
    ossImageUrl: {
      type: Array
    },
    number: {
      type: Number,
      default: 9
    },
    theme: {
      type: String,
      default: 'default'
    }
  },
  data() {
    return {
      dialogImageUrl: []
    }
  },
  created() {
    this.dialogImageUrl = this.ossImageUrl
  },
  mounted() {

  },
  methods: {
    // 钩子 - 删除事件
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    requestUpload(param) {},
    // 上传预处理
    beforeAvatarUpload(file) {
      if (file.type.indexOf('image/') === -1) {
        this.$modal.msgError('文件格式错误，请上传图片类型,如:JPG,PNG后缀的文件。')
      } else {
        const reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = () => {
          this.imageLogoName = file
        }
        this.uploadImg(file)
      }
    },
    // 上传图片
    uploadImg(file) {
      const formData = new FormData()
      formData.append('file', file)
      ossUpload(formData).then(response => {
        this.dialogImageUrl.push(response.data)
        this.$modal.msgSuccess('图片上传成功')
        // console.log(this.dialogImageUrl, 'dialogImageUrl')
        this.$emit('upimginfo', this.dialogImageUrl)
      })
    },
    // 删除图片
    delimginfo(data) {
      this.dialogImageUrl.forEach((value, index) => {
        if (value.id * 1 === data.id * 1) {
          // console.log(131, '删除')
          this.dialogImageUrl.splice(index, 1)
          this.$emit('upimginfo', this.dialogImageUrl)
        }
      })
    }
  },
  watch: {
    ossImageUrl() {
      this.dialogImageUrl = this.ossImageUrl
    }
  }
}
</script>

<style lang="scss">
.Upimg {
  .upThemeOne {
    width: 100px;
    height: 150px;
    border-radius: 5px;
    border: 1px dashed #dfe6ec;
    &:hover{
      border-color: #1890ff;
      color: #1890ff;
    }
  }
  .el-upload-list {
    display: none;
  }
  .up_img{
    cursor: pointer;
    position: relative;
    width: 100px;
    height: 150px;
    overflow: hidden;
    border-radius: 5px;
    border: 1px solid #dfe6ec;
    margin-right: 10px;
    img{
      width: 100%;
    }
    .del_img{
      display: none;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.4);
      color: #fff;
    }
    &:hover{
      border-color: #1890ff;
      color: #1890ff;
      .del_img{
        display: flex;
      }
    }
  }
}
.rectangular{
  .up_img{
    width: 100px !important;
    height: 100px !important;
  }
  .upThemeOne{
    width: 100px !important;
    height: 100px !important;
    background: #fff;
  }
}
</style>
